<template>
  <div class="row-index" :class="{ red: isRed }">
    <span>{{ title }} == {{ isRed }}</span>
    {{ age }}
    <button @click="subAdd">点击获取父数据</button>
    <button @click="subWidth">修改长度</button>
    <hr />
    <div class="father-base" v-for="item in FatherList" :key="item.id">
      <div>价格：{{ item.price }}</div>
      <div>昵称：{{ item.name }}</div>
      <div>年龄：{{ item.age }}</div>
    </div>
    <hr />
    <el-row class="row">
      <el-col class="son1" :span="11">
        <ItemSon
          :title="title"
          @subTitle="emitTitle"
          @subPink="emitPink"
          @subRest="emitRest"
          :FatherList="FatherList"
        ></ItemSon>
      </el-col>
      <el-col class="son2" :span="11">
        <!-- 2. 父组件监听事件 -->
        <ItemSon1 :age="age" @subAge="emitAge"></ItemSon1>
      </el-col>
    </el-row>

    <el-row class="row">
      <el-col :span="23">
        <ItemSon2 :w="width"></ItemSon2>
      </el-col>
    </el-row>

    <hr />
    1. 两种组件关系分类 和 对应的组件通信方案
    <br />
    父子关系 ---> props & $emit
    <br />
    非父子关系 ---> provide & inject 或 eventbus
    <br />
    终极解决方案 ---> vuex
  </div>
</template>
<script>
import axios from "axios";
import ItemSon from "./son/ItemSon.vue";
import ItemSon1 from "./son/ItemSon1.vue";
import ItemSon2 from "./son/ItemSon2.vue";

export default {
  components: {
    ItemSon,
    ItemSon1,
    ItemSon2,
  },
  props: {},
  data() {
    return {
      title: "父组件给的数据",
      age: 18,
      isRed: false,
      FatherList: [],
      width: 60,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 3. 提供处理函数，形参中获取参数（子组件传递的数据）
    emitAge(newAge) {
      this.age = newAge;
      console.log(newAge, "newValue");
    },
    emitTitle(newTitle) {
      this.title = newTitle;
    },
    emitPink() {
      this.isRed = !this.isRed;
    },
    async dataList() {
      const res = await axios.get("http://localhost:3000/baseList");
      this.FatherList = res.data;
    },
    subAdd() {
      this.dataList();
    },
    emitRest() {
      this.FatherList = [];
    },

    subWidth() {
      this.width = this.width + 10;
    },
  },
  watch: {},
};
</script>
<style scoped lang='less'>
.red {
  background-color: pink;
  box-shadow: 0 0 50px;
}
.row-index {
  border: 1px solid #666;
  padding: 10px;
  .row {
    display: flex;
    justify-content: space-between;
    // background-color: #666;
    margin-top: 10px;
    .son1,
    .son2 {
      border: 1px solid #666;
    }
  }
  .father-base {
    margin: 10px;
    padding: 10px;
    border: 1px solid #666;
  }
}
</style>
